let eles = document.querySelectorAll(".mask");
// console.log(eles);
// 获取元素在文档里的位置
function getElementToPageTop(el) {
    if(el.parentElement) {
      return this.getElementToPageTop(el.parentElement) + el.offsetTop;
    }
    return el.offsetTop;
  }
  // index为传入下标
// wid预设为0,如果传入非false值,表示赋值的为width属性,反则赋值height属性
// isNow 判断是否需要立刻执行
// num 需要往下执行多几个
function maskEvent(index,wid=0,isNow=false,num=0){
    let cHeight = document.documentElement.clientHeight;
    let eleTop = getElementToPageTop(eles[index]) - document.documentElement.scrollTop;
    // console.log(cHeight,eleTop);
    if(!isNow){
        // 元素距离顶部小于可见高度的1/2时
        if(eleTop<cHeight/2){
            if(wid){
                let eleWidth = eles[index].firstElementChild.offsetWidth;
                // console.log(eleWidth);
                eles[index].style.width = eleWidth + "px";
            }else{
                // 获取子元素/图片高度用于transition
                let eleHeight = eles[index].firstElementChild.offsetHeight;
                // console.log(eleHeight);
                eles[index].style.height = eleHeight + "px";
            }
            if(num){
                // console.log(123);
                // 延迟时间由transition持续时长控制
                if(index == 1){
                    setTimeout(()=>{
                        maskEvent(index+1,0,1);
                    },1000);
                }else if(index == 3){
                    setTimeout(()=>{
                        maskEvent(index+1,0,1);
                    },1000);
                }else if(index == 5){
                    setTimeout(()=>{
                        maskEvent(index+1,1,1);
                    },2000);
                    setTimeout(()=>{
                        maskEvent(index+2,0,1);
                    },4000);
                }
            }
        }
    }
    if(isNow){
        if(wid){
            let eleWidth = eles[index].firstElementChild.offsetWidth;
            // console.log(eleWidth);
            eles[index].style.width = eleWidth + "px";
            return;
        }else{
            // 获取子元素/图片高度用于transition
            let eleHeight = eles[index].firstElementChild.offsetHeight;
            // console.log(eleHeight);
            eles[index].style.height = eleHeight + "px";
            return;
        }
    }

}

window.onload = function(){
    console.log("onload");
    window.addEventListener("scroll",function(){
        maskEvent(0,1);

        maskEvent(1,0,0,1);
        // maskEvent(eles[2]);

        maskEvent(3,0,0,1);
        // maskEvent(eles[4]);


        maskEvent(5,0,0,2);
        // maskEvent(eles[6],1);
        // maskEvent(eles[7]);
    });
    let visionBox = document.querySelector(".vision-left");
    window.addEventListener("scroll",function(){
        // console.log([visionBox]);
        let cHeight = document.documentElement.clientHeight;
        let eleTop = visionBox.offsetTop - document.documentElement.scrollTop;
        if(eleTop<cHeight/3){
            visionBox.style.opacity = "1";
        }
    })

  }